<template>
	<view class="container">
		<!--为了让切回列表页面 页面还停留在初始页面所以需加个空div-->
		<!-- <div style="height:44px"></div>  -->
        <div id="map" style="height: 100%;"></div> 
	</view>
</template>

<script>
	import mapTool from '../../assets/js/maptool.js'
	export default {
		props:["pointList","checkPoint"],
        watch: {
        	pointList(newValue){
						this.marks =mapTool.randerMarker(newValue);
						this.checked={};
        	},
			checkPoint(item){
				if(this.checked && this.checked.id){
					let icon=this.checked.getIcon();
					icon.setImageSize({height:30,width:30});
					this.checked.setIcon(icon);
					this.checked.setOffset(new AMap.Pixel(-15, -30));
				}
				if (item.lat) {
					item.lttd = item.lat
				}
				if (item.lng) {
					item.lgtd = item.lng
				}
				mapTool.setZoomAndCenter(item)
				this.marks.forEach(mark=>{
					if(mark.id==item.id){
						let icon=mark.getIcon();
						icon.setImageSize({height:40,width:40})
						mark.setIcon(icon);
						mark.setOffset(new AMap.Pixel(-20, -40));
						this.checked=mark;
					}
				});
			}
        },
		data() {
			return {
				marks:[],
				checked:{}
			}
		},
		methods: {	
			position(data){
				mapTool.setZoomAndCenter(data);
			}
		},
		mounted(){
			mapTool.initMap();  
		},
		destroyed() {
			//销毁地图
			mapTool.destroyMap()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding: 20px;
		font-size: 14px;
		line-height: 24px;
		animation: fadeInRight 0.4s 0s both;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		.content-wrapper {
			// padding: 0 32rpx;
			height: 100%;
		}
	}
	         
	::v-deep .amap-marker-label{
		border-color: #6d6c6a;
		background-color: #fbfbfb;
		-webkit-box-shadow: 0px -3px 21px -7px #464141 inset;
		-moz-box-shadow: 0px -3px 21px -7px #464141 inset;
		box-shadow: 0px -3px 21px -7px #464141 inset;
		border-radius: 4px;
		.info{
			padding: 8rpx;
			position: relative;
		    i {
		        position: absolute;
				bottom: -23px;
				left: 50%;
				margin-left: -3px;
				content: '';
				border-bottom: 10px transparent dashed;
				border-left: 5px transparent dashed;
				border-right: 5px transparent dashed;
				border-top: 10px #313131 solid;
		    	&:before{
		    		position: absolute;
					bottom: -8px;
					left: 0;
					margin-left: -5px;
					content: '';
					border-bottom: 10px transparent dashed;
					border-left: 5px transparent dashed;
					border-right: 5px transparent dashed;
					border-top: 10px #D6D5D5 solid;
		    	}
		    }
		}
	}
</style>
